<template>
  <div>
    <div class="headerNav">
      <!-- logo -->
      <div class="header-logo">
        <img src="../../assets/images/logo.jpg" alt="">
      </div>
      <!-- 搜索框 -->
      <div class="header-search">
        <el-input
            v-model="input3"
            placeholder="请输入内容"
            class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
      <!-- 导航菜单 -->
      <div class="header-right">
        <div v-if="isLoggedIn" class="avatar-container">
          <!-- 显示头像 -->
          <el-avatar
              :src="avatarUrl"
              size="40"
              class="header-avatar"
              @click="showAvatarDialog = true"
          ></el-avatar>
          <el-link @click="goToProfile">个人中心</el-link>
        </div>
        <el-link v-else :icon="Avatar" @click="goToLogin">请登录</el-link>
        <el-link @click="logout">注销</el-link>
        <el-link>
          <el-dropdown>
        <span class="el-dropdown-link">
          我的订单
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="v in Myorder" :key="v.id">{{v.title}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-link>
      </div>
    </div>

    <!-- 头像放大弹窗 -->
    <el-dialog v-model="showAvatarDialog" width="300px" center>
      <img :src="avatarUrl" alt="用户头像" class="avatar-dialog-img" />
    </el-dialog>
  </div>
</template>

<script setup>
import { Search, Avatar, ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from "axios";

// 下拉列表
let Myorder = ref([
  {id:1,title:'酒店订单'},
  {id:2,title:'火车票订单'},
  {id:3,title:'飞机票订单'},
  {id:4,title:'旅游订单'},
  {id:5,title:'全部订单'}
])

const router = useRouter()

// 检查登录状态
const isLoggedIn = localStorage.getItem('loggedIn') === 'true';

// 用户头像 URL
const avatarUrl = ref('https://via.placeholder.com/150'); // 替换为默认头像或从后端加载
const showAvatarDialog = ref(false); // 控制头像放大弹窗

// 模拟从后端加载头像
const loadAvatar = () => {
  const userAvatar = localStorage.getItem('userAvatar'); // 从 localStorage 获取头像 URL
  if (userAvatar) {
    avatarUrl.value = userAvatar;
  }
};

// 跳转到登录页面
const goToLogin = () => {
  router.push({ name: 'login' });
}

// 跳转到个人中心页面
const goToProfile = () => {
  router.push({ name: 'profile' }); // 假设个人中心页面的路由名称为 'profile'
}

const logout = () => {
  // 清除登录状态
  localStorage.removeItem('token');
  localStorage.removeItem('loggedIn');
  axios.defaults.headers.common['token'] = '';
  // 跳转到登录页面
  goToLogin();
}

// 加载头像
if (isLoggedIn) {
  loadAvatar();
}
</script>

<style lang="scss">
/* 样式 */
.headerNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f8f8f8;
}

.header-logo img {
  width: 120px;
}

.header-search {
  flex: 1;
  margin: 0 20px;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right .el-link {
  margin-left: 15px;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-avatar {
  cursor: pointer;
}

.avatar-dialog-img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}
</style>
